<template>
  <div>
    <div>
      姓名:{{ myUser.name }}----性别:{{ myUser.sex }}----age:{{ myUser.age }}
    </div>
    <button @click="editUserInfo">修改用户的值</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Iuser {
  id?: number;
  name: string;
  sex: string;
  age: number;
}
//响应式解构
const { user } = defineProps<{
  user: Iuser;
}>();
const myUser = ref(user);
console.log(myUser);
//改变用户的值
const editUserInfo = () => {
  myUser.value.age = 20;
};
</script>

<style lang="scss"></style>
